<template>
	<view class="app-content">
		<!-- 导航 -->
		<view>
			<u-navbar :title="title" :leftIconSize="0" v-if="!loading" :fixed="true" :placeholder="true">
				<view slot="left">
					<view class="u-nav-slot" v-if="daohang.list.length<=0">
						<u-icon @click="tofanhui()" name="arrow-left" size="19" ></u-icon>
						<u-line direction="column" :hairline="false" length="16" margin="0 8px" ></u-line>
						<u-icon @click="toindex()" name="home" size="20" ></u-icon>
					</view>
				</view>
			</u-navbar>
		</view>
		<view class="xiangqing">
			这是首页
		</view>
		<u-tabbar v-if="daohang.list.length>0" :border="daohang.navi_set.border=='1'?true:false" :zIndex="999" :value="daohang.naviKey" :activeColor="daohang.navi_set.active_color" :inactiveColor="daohang.navi_set.inactive_color">
			<u-tabbar-item v-for="(item,index) in daohang.list" :badge="item.badge" :key="index" :text="item.text" :icon="daohang.naviKey==index?item.selectedIconPath:item.iconPath" @click="tabClick(item,index)" ></u-tabbar-item>
		</u-tabbar>
		<u-no-network @disconnected="disconnected" ></u-no-network>
		<u-toast ref="uToast" />
		<view class="km_loading" v-if="loading">
			<image src="@/static/loading_3.gif" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {
		wappConfig
	} from "@/api/api.js";
	import {
		getuserinfo,pushlist
	} from "@/api/user.js";
	export default {
		data() {
			return {
				title: '首页',
				loading:true,
				config:{
					pushBtn:{
						isopen:false
					}
				},
				pagePath:'/pages/home/index',
				daohang:{
					list:[],
					naviKey:0,
					navi_set:{
						active_color: "#34C083",
						height: 100,
						inactive_color: "#757575",
					}
				},
				user:{},
				location:{},
				pushList:[],
				uCurrent:0,
				slideWidth:'',//滑块宽
				slideLeft:0 ,//滑块位置
				slideRatio:'',
				windowWidth:'',
			}
		},
		components: {
		},
		onLoad() {
			this.getconfig();
			this.getdwdz();
			var systemInfo = uni.getSystemInfoSync() ;
			this.windowWidth=systemInfo.windowWidth;
			
		},
		onShow() {
			if (this.$store.getters.isLogin) {
				this.getuser();
			}
		},
		methods: {
			//根据分类获取比例
			getRatio(){
			  var self = this ;
			  var _totalLength = self.config.pushBtn.list.length; //分类列表总长度
			  var _ratio = 230 / _totalLength * (750 / this.windowWidth); //滚动列表长度与滑条长度比例
			  var _showLength = parseInt(this.config.pushBtn.huakuai) / _totalLength * parseInt(this.config.pushBtn.col); //当前显示红色滑条的长度(保留两位小数)
			  console.log(_totalLength,_ratio,_showLength)
			  this.slideWidth= _showLength;
			  this.totalLength= _totalLength;
			  this.slideRatio=_ratio;
			  
			} ,
			getleft(e){
				console.log(e)
				let _totalLength = this.config.pushBtn.list.length; //分类列表总长度
				let _hkLength = parseInt(this.config.pushBtn.huakuai)/_totalLength; //滑块长度
				let scrollWidth=e.detail.scrollWidth;
				let ratio=((scrollWidth/_totalLength)*100)/100;//每块内容占据宽度
				let ratio1=(e.detail.scrollLeft/ratio);//每块内容占据宽度
				
				this.slideLeft= _hkLength*ratio1
				// this.getRatio();
			  },
			pswiperchange(e) {
				this.uCurrent = e.detail.current;
			},
			getpushlist(lat="",lng=""){
				let that=this;
				let dt={
					lat:lat,
					lng:lng
				};
				pushlist(JSON.stringify(dt)).then(res=>{
					console.log(res)
					that.pushList=res.data.list
					that.loading=false;
				})
				.catch(res=>{
					uni.showModal({
						content:res.msg?res.msg:res?res:"获取推荐失败",
						title:"提示",
						showCancel:false
					})
					that.loading=false;
				})
			},
			getdwdz(){
				let that=this;
				uni.getLocation({
					type: 'wgs84',
					geocode:true,//设置该参数为true可直接获取经纬度及城市信息
					success: function (res) {
						console.log(res)
						let ad={};
						ad.lng=res.longitude;
						ad.lat=res.latitude;
						ad.addrDel = res;
						that.location=ad;
						uni.setStorage({
							key: 'km_location',
							data: ad,
						});
						that.getpushlist(res.latitude,res.longitude)
					},
					fail: function (error) {
						console.log(error)
						uni.showToast({
							title: '获取地址失败，将导致部分功能不可用',
							icon:'none'
						});
						that.getpushlist()
					}
				});
			},
			retry(){
				this.getconfig();
			},
			tourl(e){
				console.log(e)
				if(!e){
					return true;
				}
				if(e==this.pagePath){
					return true;
				}
				uni.navigateTo({
					url:e,
					fail(error) {
						console.log(error)
						uni.showToast({
							title:"跳转出错",
							icon:"none"
						})
					}
				})
			},
			tofanhui(){
				console.log(1)
				uni.navigateBack({
					delta: 1,
					fail(){
						 uni.reLaunch({
							 url: '/pages/index/index'
						 });
					}
				})
			},
			toindex(){
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},
			// 切换导航
			tabClick(e,i){
				if(this.daohang.naviKey!=i){
					uni.reLaunch({
						url:e.pagePath,
						fail(err) {
							uni.showModal({
								content:err.errMsg,
								title:"错误提示",
								showCancel:false,
								fail(r) {
									console.log(r)
								}
							})
							console.log(err)
						}
					})
				}
				
			},
			getconfig(){
				let that=this;
				wappConfig({pagePath:that.pagePath}).then(e=>{
					console.log("home/index")
					that.daohang=e.data.naviList;
					that.config=e.data;
					uni.setNavigationBarTitle({
						title:that.title,
						complete(res) {
							console.log(res)
						}
					})
					that.loading=false;
				})
				.catch(res => {
					console.log(res)
					uni.showModal({
						content:res.msg?res.msg:"获取配置文件失败",
						title:"提示",
						showCancel:false
					})
					that.loading=false;
				});
			},
			getuser(dt){
				let that=this;
				if(!dt){
					if(that.location.lat&&that.location.lng){
						dt={
							lat:that.location.lat,
							lng:that.location.lng
						}
					}
				}
				getuserinfo(dt).then(res=>{
					this.user=res.data;
				}).catch(e=>{
					//TODO handle the exception
					console.log(e)
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fefefe;
	}
	.slide{
	  height:30rpx;
	  background:#fff;
	  width:100%;
	  padding:14rpx 0 5rpx 0;
	  .slide-bar{
	  	  width:230rpx;
	  	  margin:0 auto;
	  	  height:3px;
	  	  background:#ccc;
		  overflow: hidden;
		  .slide-show{
		    height:100%;
		    background-color:#ff6969;
		  }
	  	}
	}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
	.headGrid{
		// height: 200rpx;
		width: 100%;
		.hditem{
			display: inline-block;
			width: calc(25% - 40rpx);
			padding: 20rpx;
		}
		.grid-center{
			width: 100%;
			text-align: center;
		}
		.gridtitle{
			padding: 30rpx;
			font-size: 28rpx;
			font-weight: 600;
			background-color: #FFFFFF;
		}
		.grid-text{
			text-align: center;
			padding: 10rpx 0 20rpx 0rpx;
			// width: 100%;
		}
	}
	.plist{
		height: calc(100vh - 164rpx - 110rpx - 210rpx);
		width: 100%;
		.pswiper{
			height: 100%;
		}
		.item{
			height: calc(100% - 20rpx );
			position: relative;
			overflow: hidden;
			border-radius: 15rpx;
			box-shadow: 0px 1px 9px 0px rgba(179,179,179,0.26);
			margin: 10rpx 20rpx;
			.itemct{
				height: 100%;
			}
			.img{
				height: 100%;
			}
			.site{
				position: absolute;
				top: 20rpx;
				left: 20rpx;
				background-color: rgba(61, 61, 61, 0.6);
				color: #fff;
				padding: 10rpx 20rpx;
				border-radius:120rpx
			}
			.bottom{
				background-image: linear-gradient(rgba(61, 61, 61, 0.01) , rgba(61, 61, 61, 0.2),rgba(61, 61, 61, 0.5), rgba(61, 61, 61, 0.8));
				position: absolute;
				left:0;
				bottom:0;
				width: calc(100% - 40rpx );
				padding:20rpx;
				min-height: 100rpx;
				color:#fff;
				.bttop{
					min-height: 100rpx;
				}
				.btname{
					font-weight: 600;
					font-size: 35rpx;
					.renzhen{
						display:inline-block;
						padding:10rpx 20rpx;
						margin-left:10rpx;
						background-image: linear-gradient(rgba(192,251,211,1), rgba(145,217,169,1));
						border-radius:120rpx
					}
				}
				.neirong{
					font-size: 28rpx;
					margin-top:10rpx;
				}
			}
		}
	}
</style>
